<template>
	<div class="tabBar-box">
		<ul class="tabBar">
			<li class="tabBar-list" v-for="(tabBar,index) in tabBarList" :key="index" @click="clickFn(tabBar.router)">
				<router-link class="link" :to="tabBar.router">
				<span :class="tabBar.isCheck?tabBar.check:tabBar.noCheck"></span>
				<p v-if="tabBar.title">{{tabBar.title}}</p>
				</router-link>
			</li>
			<!-- <li class="tabBar-list">
				<span class="noCheck-sort"></span>
				<p>分类</p>
			</li>
			<li class="tabBar-list"><span class="noCheck-logo"></span></li>
			<li class="tabBar-list">
				<span class="noCheck-adviser"></span>
				<p>电话咨询</p>
			</li>
			<li class="tabBar-list" >
				<span class="noCheck-caart"></span>
				<p>购物车</p>
			</li> -->
		</ul>
	</div>
</template>

<script>
export default {
	name: 'tabBar',
	props: ['tabBarList'],
	data() {
		return {
		/* 	tabBarList: [
				{
					title: '首页',
					isCheck: true,
					check: 'lll'
				}
			] */
		};
	},
	methods: {
		clickFn(index){
			this.$emit("clickHandel",index);
		}
	},
	created() {},
	mounted() {}
};
</script>

<style scoped="scoped">
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	list-style: none;
}
span,
i {
	display: inline-block;
	width: 0.56rem;
	height: 0.6rem;
}
.tabBar-box {
	width: 100%;
	height: 1.12rem;
	position: fixed;
	bottom: 0;
	z-index: 4;
	border-top: 0.01rem solid #ddd;
}
.tabBar {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
	background-color: white;
	padding-top: 0.024rem ;
}
.tabBar-list,.link {
	width: 75.04px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
}
p {
	font-size: 0.24rem;
}
span {
	width: 28px;
	height: 30px;
	background-size: 54px;
	background-repeat: no-repeat;
	background-image: url(http://i.huasongwang.com/i/c/toolbar.png);
}
.noCheck-home {
	background-position: -12px -42px;
}
.noCheck-home +p{
	color: black;
}
.noCheck-sort {
	background-position: -12px -124px;
}
.noCheck-sort +p{
	color: black;
}
.noCheck-logo {
	background-position: 1px -218px;
	background-size: 48px;
	height: 1.12rem;
	width: 48px;
}

.noCheck-adviser {
	background-position: -13px -209px;
}
.noCheck-adviser +p{
	color: black;
}
.noCheck-cart {
	background-position: -13px -347px;
}
.noCheck-cart +p{
	color: black;
}

.check-home{
	background-position: -13px -1px;
}
.check-home +p{
	color: #AC976B;
}
.check-sort{
	background-position: -12px -82px;
}
.check-sort +p{
	color: #AC976B;
}
.check-adviser{
	background-position: -13px -209px;
}
.check-adviser +p{
	color: black;
}
.check-cart{
	background-position: -13px -347px;
}
.check-cart +p{
	color: black;
}
</style>
